<template>
  <div class="dashboard-container home">
    <!-- 营业数据 -->
    <div class="homeMain">
      <Overview :overview-data="overviewData"/>
      <div class="statement">
        <router-link to="/statement" class="content">
          <img src="@/icons/svg/statement.svg" alt=""/>
          <p type="primary">
            结算
          </p>
        </router-link>
        <img class="go" src="@/icons/svg/go.svg" alt="">
      </div>
    </div>
    <!-- end -->
    <!-- 订单管理 -->
    <div class="homeMain">
      <Orderview :orderview-data="orderviewData"/>
      <div class="statement">
        <div class="content" @click="onAddOrder">
          <img src="@/icons/svg/add.svg" alt=""/>
          <p type="primary">
            加菜
          </p>
        </div>
      </div>
    </div>

    <!-- end -->
    <div class="homeMain">
      <!-- 菜品总览 -->
      <CuisineStatistics :dishes-data="dishesData"/>
      <!-- end -->
      <!-- 套餐总览 -->
      <SetMealStatistics :set-meal-data="setMealData"/>
      <!-- end -->
    </div>
    <!-- 订单信息 -->
    <OrderList
      :order-statics="orderStatics"
      @getOrderListBy3Status="getOrderListBy3Status"
    />
    <!-- end -->
    <el-dialog
      title="添加订单"
      :visible.sync="addDialogVisible"
      width="55%"
      class="addOrder"
      @close="handleClose"
    >
      <el-form ref="addOrderForm" :model="addOrderForm" label-width="120px" :rules="rules">
        <el-form-item label="桌号：" prop="place">
          <el-input
            v-model="addOrderForm.place"
            placeholder="请输入桌号"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜品/套餐：">
          <el-select v-model="addOrderForm.categoryType"
                     style="width: 180px"
                     placeholder="请选择"
                     clearable
                     @clear="initProp"
                     @change="getCategoryList"
          >
            <el-option v-for="item in [{ value: 1, label: '菜品分类'},{ value: 2, label: '套餐分类'}]"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类：">
          <el-select v-model="addOrderForm.categoryId"
                     style="width: 180px"
                     placeholder="请选择"
                     clearable
                     @clear="init"
                     @change="getDishList"
          >
            <el-option v-for="item in categoryList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜品：">
          <div style="display: flex;flex-direction: row">
            <el-select v-model="addOrderForm.dishId"
                       style="width: 180px"
                       placeholder="请选择"
                       clearable
                       @clear="init"
                       @change="getDishFlavorList"
            >
              <el-option v-for="item in dishList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"
              />
            </el-select>
            <div v-if="addOrderForm.dishId!=='' && dishDetail.flavors.length>0"
                 style="display: flex;flex-direction: row"
            >
              <div v-for="(item,index) in dishDetail.flavors" :key="item.id">
                <span style="margin:0 8px 0 20px">{{ item.name }}：</span>
                <el-select v-model="dishFlavor[index]"
                           name="品品品"
                           style="width: 120px"
                           placeholder="请选择"
                           clearable
                >
                  <el-option v-for="item1 in item.values"
                             :key="item1"
                             :label="item1"
                             :value="item1"
                  />
                </el-select>
              </div>
            </div>
            <div v-if="addOrderForm.dishId!=='' && dishDetail.setmealDishes.length>0"
                 style="display: flex;flex-direction: row"
            >
              <div v-for="(item) in dishDetail.setmealDishes" :key="item.id">
                <span style="margin:0 8px 0 20px">{{ item.name }}*{{ item.copies }}</span>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="数量：">
          <el-input
            v-model="addOrderForm.number"
            placeholder="请输入数量"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            v-model="addOrderForm.remark"
            placeholder="请输入备注"
            type="textarea"
            style="width: 200px"
            clearable
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addOrderHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {getBusinessData, getOrderData, getOverviewDishes, getSetMealStatistics,} from '@/api/index'
import {getOrderListBy, postOrderAddOrderApi} from '@/api/order'
import {ElForm} from 'element-ui/types/form';

// 组件
// 营业数据
import Overview from './components/overview.vue'
// 订单管理
import Orderview from './components/orderview.vue'
// 菜品总览
import CuisineStatistics from './components/cuisineStatistics.vue'
// 套餐总览
import SetMealStatistics from './components/setMealStatistics.vue'
// 订单列表
import OrderList from './components/orderList.vue'
import {getCategoryListApi} from '../../api/category';
import {queryDishList} from '../../api/dish';
import {getSetmealListApi} from '../../api/setmeal';
//
@Component({
  name: 'Dashboard',
  components: {
    Overview,
    Orderview,
    CuisineStatistics,
    SetMealStatistics,
    OrderList,
  },
})
export default class extends Vue {
  private todayData = {} as any
  private overviewData = {}
  private orderviewData = {} as any
  private flag = 2
  private tateData = []
  private dishesData = {} as any
  private setMealData = {}
  private orderListData = []
  private counts = 0
  private page: number = 1
  private pageSize: number = 10
  private status = 2
  private orderStatics = {} as any

  created() {
    this.init()
  }

  init() {
    this.$nextTick(() => {
      this.getBusinessData()
      this.getOrderStatisticsData()
      this.getOverStatisticsData()
      this.getSetMealStatisticsData()
    })
  }

  // 获取营业数据
  async getBusinessData() {
    const data = await getBusinessData()
    this.overviewData = data.data.data
  }

  // 获取今日订单
  async getOrderStatisticsData() {
    const data = await getOrderData()
    this.orderviewData = data.data.data
  }

  // 获取菜品总览数据
  async getOverStatisticsData() {
    const data = await getOverviewDishes()
    this.dishesData = data.data.data
  }

  // 获取套餐总览数据
  async getSetMealStatisticsData() {
    const data = await getSetMealStatistics()
    this.setMealData = data.data.data
  }

  //获取待处理，待派送，派送中数量
  getOrderListBy3Status() {
    getOrderListBy({})
      .then((res) => {
        if (res.data.code === 1) {
          this.orderStatics = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  private addDialogVisible: boolean = false
  private categoryList = []
  private dishList = []
  private dishDetail = {} as any
  private dishFlavor = []
  private addOrderForm = {
    categoryType: undefined,
    categoryId: '',
    dishId: '',
    number: 1,
    place: '',
    remark: '',
  }

  rules = {
    place: [
      {required: true, message: '请输入桌号', trigger: 'blur'},
    ],
  }

  getCategoryList() {
    this.categoryList = []
    this.addOrderForm.dishId = ''
    this.addOrderForm.categoryId = ''
    this.dishFlavor = []
    this.dishList = []
    this.dishDetail = {}
    getCategoryListApi({type: this.addOrderForm.categoryType}).then(res => {
      if (res.data.code === 1) {
        this.categoryList = res.data.data.filter(item => item.status === 1)
      }
    })
  }

  getDishList() {
    this.dishDetail = {}
    this.dishFlavor = []
    this.addOrderForm.dishId = ''
    if (this.addOrderForm.categoryType === 1) {
      queryDishList({categoryId: this.addOrderForm.categoryId}).then(res => {
        if (res.data.code === 1) {
          this.dishList = res.data.data.filter(item => item.status === 1)
        }
      })
    } else {
      getSetmealListApi({categoryId: this.addOrderForm.categoryId}).then(res => {
        if (res.data.code === 1) {
          this.dishList = res.data.data
        }
      })
    }
  }

  getDishFlavorList() {
    this.dishDetail.flavors = []
    this.dishDetail.setmealDishes = []
    const filter = this.dishList.filter(item => item.id === this.addOrderForm.dishId);
    if (!filter || filter.length === 0) {
      return
    }
    this.dishDetail = {...this.dishDetail, ...filter[0]}
    if (this.dishDetail.flavors.length > 0) {
      this.dishDetail.flavors.forEach((item, index) => {
        item.values = JSON.parse(item.value)
        this.dishFlavor[index] = item.values[0]
      })
    }
  }

  initProp() {
    this.addOrderForm = {
      categoryType: undefined,
      categoryId: '',
      dishId: '',
      number: 1,
      place: '',
      remark: '',
    }
    this.dishDetail = {} as any
    this.dishFlavor = []
  }

  // 添加
  private onAddOrder() {
    this.addDialogVisible = true
  }

  addOrderHandle() {
    (this.$refs.addOrderForm as ElForm).validate((valid: any) => {
      if (valid) {
        const categoryName = this.categoryList.filter(item => item.id === this.addOrderForm.categoryId)[0].name
        const order = {
          categoryName,
          status: 2,
          amount: this.dishDetail.price * this.addOrderForm.number,
          place: this.addOrderForm.place,
          remark: this.addOrderForm.remark,
          orderDetails: [{
            name: this.dishDetail.name,
            image: this.dishDetail.image,
            dishId: this.addOrderForm.categoryType === 1 ? this.addOrderForm.dishId : null,
            setmealId: this.addOrderForm.categoryType === 2 ? this.addOrderForm.dishId : null,
            dishFlavor: this.dishFlavor.length > 0 ? this.dishFlavor.join(',') : null,
            number: this.addOrderForm.number,
            amount: this.dishDetail.price,
          }]
        }
        postOrderAddOrderApi(order).then(res => {
          if (res.data.code === 1) {
            this.$message.success('下单成功！')
            this.init()
            this.handleClose()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    })
  }

  handleClose() {
    (this.$refs.addOrderForm as ElForm).resetFields()
    this.initProp()
    this.addDialogVisible = false
  }

}
</script>

<style lang="scss">
.statement {
  width: 200px;
  background-color: #FFFFFF;
  margin: 0 0 20px 20px;
  position: relative;

  .go {
    position: absolute;
    width: 20px;
    right: 50px;
    bottom: 90px;
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 160px;
    margin: 20px auto;
    flex-direction: column;
    background-color: #efb602;
    border-radius: 5px;

    &:hover {
      opacity: 0.8;
      border: 3px solid #FFFFFF;
    }

    img {
      width: 24px;
      margin-bottom: 8px;
    }

    p {
      font-size: 16px;
      color: #FFFFFF;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

</style>
